) — это ровно одна строка,
«как в блокноте». У постов ботов (cron_bot_posting.php) абзацы идут подряд без пустых
, поэтому им отступ оставляем — иначе абзацы слиплись бы встык. */
.post-text p { margin-bottom: 0; }
/* ===== Списки в тексте постов и комментариев =====
Разметка зависит от источника:
• Quill (редактор на сайте) отдаёт
—
признак маркера лежит в атрибуте, тег у обоих видов списков ;
• markdown/ручной HTML может дать обычные
/.
Поэтому покрываем оба варианта.
Отступы кратны базовому ритму текста: слева 24px (кратно 12px — паддингу
пузыря и отступам .post-text), между пунктами 4px — тот же зазор, что у
строк текста. Маркер вынесен наружу (outside), чтобы текст пункта
выравнивался по тексту абзацев, а не «уезжал» вправо. */
.post-text ul,
.post-text ol {
margin: 8px 0;
padding-left: 24px;
list-style-position: outside;
}
.post-text li {
margin: 4px 0;
}
/* Обычные списки (markdown / вставленный HTML) */
.post-text ul { list-style-type: disc; }
.post-text ol { list-style-type: decimal; }
/* Вложенные уровни: кружок, затем квадрат — как принято в тексте */
.post-text ul ul { list-style-type: circle; }
.post-text ul ul ul { list-style-type: square; }
/* Списки от Quill: тег ВСЕГДА , а вид задаёт data-list.
Маркер НЕ отключаем: list-style-type: none с последующим ::marker требует
ручного счётчика, и любая ошибка в нём даёт «1. 1. 1.» вместо нумерации.
Задаём вид маркера напрямую — тогда встроенный счётчик браузера работает
штатно, без нашей арифметики. */
.post-text ol:has(> li[data-list]) { list-style-type: none; }
.post-text li[data-list="bullet"] { list-style-type: disc; }
.post-text li[data-list="ordered"] { list-style-type: decimal; }
.post-text p:empty { margin-bottom: 0; } /* пустой параграф (без ) не даёт воздуха */
.post-text p:has(> br:only-child) { margin-bottom: 0; line-height: 1.30; } /* пустой абзац = ровно одна строка */
.post-text--bot-log p { margin-bottom: 40px; }
.post-text p:has(img) {
margin-top: 25px;
margin-bottom: 25px;
}
/* Фото в постах: во всю ширину поста, высота ограничена 500px (превью), по клику — полное */
.post-text img {
width: 100%;
max-width: 100%;
max-height: 500px;
height: auto;
object-fit: cover;
object-position: 50% 25%; /* кадрировать ближе к верху (3/4 от верхней кромки), не по центру */
display: block;
margin: 25px 0 !important;
border-radius: 8px;
cursor: pointer;
}
.comment-body img {
width: 500px;
max-width: 100%;
height: auto;
display: block;
margin: 25px 0 !important;
border-radius: 8px;
cursor: pointer;
}
/* Загруженные видео в постах: во всю ширину поста, высота ограничена 400px */
.post-text video {
width: 100%;
max-width: 100%;
max-height: 400px;
height: auto;
object-fit: contain;
display: block;
margin: 12px 0;
border-radius: 8px;
}
/* === Водяной знак «Д» (логотип Дневничка) поверх ЗАГРУЖЕННЫХ видео ===
Обёртку создаёт JS (main.js → brandUploadedVideos). Только для uploads/videos,
внешние iframe-встраивания не трогаем. Логотип не перехватывает клики. */
.dnk-video {
position: relative;
display: block;
line-height: 0; /* убираем нижний зазор под видео */
}
.dnk-video video {
display: block;
width: 100%;
max-width: 100%;
margin: 0; /* отступы отдельно у контекста-родителя (см. ниже) */
line-height: normal;
}
/* Логотип в правом верхнем углу: заглавная «Д» белым на чёрном круге.
Без теней, без наклона; шрифт как в заголовках (inherit, жирный 700). */
.dnk-logo {
position: absolute;
top: 10px;
right: 14px;
z-index: 2;
pointer-events: none; /* клики проходят сквозь к логотипу → не мешаем плееру */
display: flex;
align-items: center;
justify-content: center;
width: 44px; /* размер чёрного круга */
height: 44px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.72);
font-family: inherit;
font-weight: 700; /* как в заголовках */
font-style: normal;
font-size: 27px;
line-height: 1;
color: #fff;
user-select: none;
}
/* Постам логотип зримо, но корректно по углам; в ленте не мешает кнопкам.
Комментарии: видео само задаёт width:500px/margin:8px 0 (каскадно ниже),
поэтому обёртке там margin не задаём, чтобы не удваивать вертикальный отступ. */
.post-text .dnk-video { margin: 12px 0; }
/* На планшетах/телефонах логотип чуть меньше, чтобы не закрывать контролы */
@media (max-width: 600px) {
.dnk-logo {
top: 6px;
right: 8px;
width: 34px;
height: 34px;
font-size: 20px;
}
}
/* Загруженные аудио (mp3) в постах: компактный плеер на всю ширину */
.post-text audio {
width: 100%;
max-width: 100%;
display: block;
margin: 12px 0;
}
@media (max-width: 600px) {
.post-text img, .comment-body img {
width: 100%;
margin: 12px 0 !important;
}
}
/* Импортированные видео то LJ (lj-embed) — сетрили как картинки/видео: центр, ширина 500px, 16:9 */
.post-text .lj-embed, .comment-body .lj-embed {
width: 500px;
max-width: 100%;
aspect-ratio: 16 / 9;
height: auto;
display: block;
margin: 12px auto;
border: none;
border-radius: 4px;
}
@media (max-width: 600px) {
.post-text .lj-embed, .comment-body .lj-embed {
width: 100%;
margin: 8px auto;
}
}
.post-text blockquote {
border-left: 3px solid var(--primary);
padding-left: 12px;
color: var(--text-secondary);
margin: 8px 0;
}
.post-text pre {
background: #f0f0f0;
border-radius: var(--radius);
padding: 12px;
overflow-x: auto;
font-size: 0.85rem;
line-height: 1.4;
}
.post-text code {
background: #f0f0f0;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
.post-text pre code {
background: none;
padding: 0;
}
.post-text .hashtag {
color: var(--primary);
font-weight: 500;
}
.post-text .mention {
color: var(--primary);
font-weight: 500;
}
/* Post footer */
.post-footer {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.post-footer .views {
cursor: default;
border-color: transparent;
}
.post-footer .views:hover {
background: var(--bg-card);
}
.post-section-link {
margin-left: auto;
font-size: 0.8rem;
color: var(--primary, #2563eb);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
}
.post-section-link:hover {
text-decoration: underline;
}
.post-privacy-icon {
margin-left: 4px;
font-size: 1rem;
background: transparent;
border: none;
cursor: pointer;
color: var(--text-muted);
line-height: 1;
padding: 4px;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
}
.post-privacy-icon:hover {
background: var(--bg);
color: var(--text);
}
.profile-sections-picker {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.profile-sections-picker label {
font-size: 0.85rem;
color: var(--text-muted);
}
.profile-sections-picker select {
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text);
font-family: inherit;
font-size: 0.9rem;
}
.section-picker select {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text);
font-family: inherit;
font-size: 0.9rem;
box-sizing: border-box;
}
/* Выпадающие меню в форме создания поста (видимость, комментарии) — тек же, что раздел */
.form-select {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
color: var(--text);
font-family: inherit;
font-size: 0.9rem;
box-sizing: border-box;
}
.new-section-row {
display: flex;
gap: 8px;
margin-top: 8px;
}
.new-section-row input {
flex: 1;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: inherit;
font-size: 0.9rem;
background: var(--bg-card);
color: var(--text);
}
/* Post gallery — каскад как в iPhone */
.gallery-stack {
position: relative;
margin: 8px 0;
cursor: pointer;
min-height: 250px;
overflow: hidden;
}
.gallery-stack .gallery-item {
position: absolute;
top: 0;
left: 50%;
transform-origin: center center;
width: 35%;
margin-left: -17%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 12px rgba(0,0,0,0.12);
transition: transform 0.3s ease;
background: #fff;
}
.gallery-stack .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-stack:hover .gallery-item {
transform: none !important;
}
.gallery-stack:hover .gallery-item:nth-child(2) {
transform: rotate(-1deg) translateY(-4px) !important;
}
.gallery-stack:hover .gallery-item:nth-child(3) {
transform: rotate(1deg) translateY(-8px) !important;
}
/* Одна картинка — без каскада */
.gallery-stack[data-total="1"] .gallery-item {
position: relative;
width: 100%;
max-width: 100%;
margin-left: 0;
left: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* СЕТКА 3 в ряд (решение юзера 30.08.26): плитки, клик → лайтбокс с навигацией.
Переопределяет каскадное absolute-позиционирование .gallery-stack. */
.gallery-stack.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
min-height: 0;
overflow: visible;
padding-bottom: 0; /* НЕ наследовать каскадный padding-bottom:75% из мобильного
media (.gallery-stack) — иначе под сеткой пустое место ~пол-экрана */
margin-top: 35px; /* отступ над галереей (решение юзера 30.08.26) */
margin-bottom: 8px;
}
.gallery-stack.gallery-grid .gallery-item {
position: relative;
top: auto;
left: auto;
width: 100%;
margin-left: 0;
border-radius: 8px;
box-shadow: none;
aspect-ratio: 1 / 1;
background: #000;
}
.gallery-stack.gallery-grid .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-stack.gallery-grid:hover .gallery-item {
transform: none !important;
}
/* Превью-галерея в форме создания поста: плитки 3 в ряд */
.post-gallery-upload {
margin-top: 8px;
}
.post-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.post-gallery-grid .pg-item {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
background: #000;
}
.post-gallery-grid .pg-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.post-gallery-grid .pg-item .pg-remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
font-size: 12px;
line-height: 20px;
text-align: center;
cursor: pointer;
}
/* Мобильные */
@media (max-width: 480px) {
.gallery-stack {
padding-bottom: 75%; /* чуть выше на мобильных */
}
.gallery-stack .gallery-item {
width: 50%;
margin-left: -25%;
}
/* Одна картинка — каскадный padding не нужен: иначе под портретным фото
остаётся огромное пустое место (75% ширины) после картинки на мобильном */
.gallery-stack[data-total="1"] {
padding-bottom: 0;
}
.gallery-stack[data-total="1"] .gallery-item {
width: 100%;
margin-left: 0;
}
}
/* Post video */
.post-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 12px 0;
border-radius: var(--radius);
overflow: hidden;
min-height: 200px;
}
.post-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Video inside comments — iframe-плееры: фикс, чтобы высота соответствовала ширине (16:9),
а не padding-bottom, который берёт процент от родителя (даёт черную вытянутую полосу) */
.comment-body .post-video {
width: 500px;
max-width: 100%;
aspect-ratio: 16 / 9;
padding-bottom: 0;
height: auto;
min-height: 0;
}
/* Avatars */
.avatar {
border-radius: 50%;
object-fit: cover;
background: var(--bg);
}
.avatar-32 { width: 42px; height: 42px; }
.avatar-64 { width: 64px; height: 64px; }
.avatar-96 { width: 96px; height: 96px; }
.avatar-128 { width: 128px; height: 128px; }
/* Аватарка на странице юзера — квадратная как в ленте (со скруглением 16px) */
.profile-page .profile-avatar-section .avatar { border-radius: 16px; }
/* Превью аватара в кабинете редактирования — прямоугольное, как на странице юзера */
.edit-profile-page #avatar-preview { border-radius: 16px; }
.avatar-wrapper {
position: relative;
display: inline-block;
}
.online-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 12px;
height: 12px;
background: var(--online);
border: 2px solid var(--bg-card);
border-radius: 50%;
}
.online-dot.large {
width: 20px;
height: 20px;
bottom: 4px;
right: 4px;
}
/* Profile */
/* === Удалённый аккаунт (deleted_at) === */
.account-deleted-notice {
color: var(--text-muted);
}
.profile-page .avatar-deleted img,
.avatar-deleted img,
img.avatar-deleted,
.user-avatar-deleted img {
opacity: 0.35 !important;
filter: grayscale(1);
}
.profile-nickname.is-deleted {
color: var(--text-muted) !important;
text-decoration: line-through;
opacity: 0.7;
}
.is-deleted-user {
color: var(--text-muted) !important;
opacity: 0.6;
}
.post-author-name.is-deleted-user,
.comment-author .is-deleted-user,
.sidebar-newfaces .is-deleted-user {
color: var(--text-muted) !important;
opacity: 0.6;
}
.profile-page {
padding: 16px 0;
}
.profile-header-owner {
display: flex;
justify-content: flex-end;
margin-bottom: 16px;
}
.profile-avatar-menu {
display: flex;
align-items: center;
gap: 8px;
}
.profile-middle {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.profile-info {
flex: 1;
}
.profile-nickname {
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: -0.015em;
margin-bottom: 2px;
}
.profile-username {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 8px;
}
/* Блок «Рейтинг» справа от никнейма (прижат к правому краю) + иконки симпатии/антипатии */
.profile-rating-side {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin-left: auto;
flex-shrink: 0;
}
.profile-rating-badge {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.profile-rating-label {
font-size: 0.78rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-rating-value {
font-size: 1.3rem;
font-weight: 800;
line-height: 1;
}
.profile-rating-value.positive { color: #16a34a; }
.profile-rating-value.negative { color: #dc2626; }
.profile-rating-votes {
display: flex;
align-items: center;
gap: 6px;
}
.vote-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--border);
background: var(--bg-card);
border-radius: 50%;
cursor: pointer;
font-size: 1.15rem;
line-height: 1;
transition: transform 0.15s, background 0.2s;
}
.vote-btn:hover {
transform: scale(1.1);
background: var(--bg);
}
.vote-sympathy:hover { border-color: #16a34a; }
.vote-antipathy:hover { border-color: #dc2626; }
@media (max-width: 480px) {
.profile-rating-side {
width: 100%;
justify-content: flex-start;
margin-left: 0;
flex-wrap: wrap;
}
}
/* Кнопка ⋯ и выпадающее меню действий в профиле */
.profile-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.profile-name-row .profile-nickname {
margin-bottom: 0;
}
.profile-menu-wrap {
position: relative;
display: inline-block;
}
.profile-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(127,127,127,0.15); /* еле заметный серый фон под точками */
color: var(--text-muted);
font-size: 1.95rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.profile-menu-btn:hover {
background: rgba(127,127,127,0.28);
color: var(--text);
}
.profile-menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 60;
min-width: 220px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius, 10px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
padding: 6px 0;
}
.profile-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 9px 14px;
border: none;
background: none;
cursor: pointer;
font-size: 0.92rem;
color: var(--text);
font-family: inherit;
white-space: nowrap;
}
.profile-menu-item:hover {
background: var(--bg);
}
.profile-menu-item.is-danger {
color: var(--rating-negative, #dc2626);
}
.profile-menu-item:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 480px) {
.profile-menu {
position: fixed;
right: 12px;
left: 12px;
top: auto;
}
}
.profile-about,
.profile-location,
.profile-interests,
.profile-age {
margin-bottom: 4px;
font-size: 0.9rem;
color: var(--text-secondary);
}
.profile-last-visit {
margin-top: 8px;
font-size: 0.8rem;
color: var(--text-muted);
}
/* «Последний визит: сейчас» — когда юзер/бот в блоке «Кто онлайн» */
.profile-last-visit-online {
color: var(--online);
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.profile-last-visit-online .profile-last-visit-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--online);
display: inline-block;
flex-shrink: 0;
}
.profile-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
padding: 12px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}
.stat-value {
font-weight: 700;
font-size: 1.1rem;
}
.profile-rating {
display: inline-block;
padding: 2px 10px;
border-radius: 6px;
font-weight: 700;
color: #fff;
font-size: 1.1rem;
}
.profile-rating.positive { background: #16a34a; }
.profile-rating.negative { background: #dc2626; }
.profile-rating.neutral { background: #9ca3af; }
/* Рейтинг в блоке статистики — справа, вплотную к границе блока */
.profile-stats-rating { margin-left: auto; text-align: center; }
.profile-stats-rating .profile-rating { display: inline-block; margin-bottom: 4px; }
/* Движение рейтинга за неделю: зелёный плюс / красный минус */
.week-delta.positive { color: #16a34a; }
.week-delta.negative { color: #dc2626; }
.btn-danger {
background: #dc2626;
color: #fff;
border: none;
}
.btn-danger:hover {
background: #b91c1c;
}
.btn-warning {
background: #d97706;
color: #fff;
border: none;
}
.btn-warning:hover {
background: #b45309;
}
/* Admin: ban badges & actions */
.profile-medal {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: 8px;
font-size: 1.1rem;
line-height: 1;
cursor: default;
}
.ban-badge {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
color: #fff;
}
.ban-badge--full { background: #dc2626; }
.ban-badge--half { background: #d97706; }
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 10px 12px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 8px;
}
.admin-label {
font-weight: 700;
font-size: 0.85rem;
color: #92400e;
}
.admin-sep {
color: #b45309;
opacity: 0.6;
font-weight: 600;
}
.admin-bot-attack {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 2px 8px;
border-radius: 6px;
user-select: none;
}
.admin-bot-attack:hover {
background: rgba(146, 64, 14, 0.08);
}
.bot-attack-label {
font-size: 0.85rem;
font-weight: 600;
color: #92400e;
white-space: nowrap;
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
}
.profile-actions {
margin-bottom: 16px;
}
/* Кнопки под аватаркой на странице юзера — шириной = аватарке (128px), колонкой */
.profile-actions--avatar {
display: flex;
flex-direction: column;
gap: 8px;
width: 128px;
margin-top: 12px;
margin-bottom: 0;
}
.profile-actions--avatar .btn {
width: 100%;
box-sizing: border-box;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.profile-feed {
margin-top: 16px;
}
.profile-feed h2 {
margin-bottom: 12px;
}
/* Edit profile */
.edit-profile-page {
max-width: 480px;
margin: 0 auto;
padding: 16px;
}
.edit-profile-page h1 {
margin-bottom: 20px;
}
.edit-avatar-section {
text-align: center;
margin-bottom: 24px;
}
.edit-avatar-section .avatar {
margin-bottom: 8px;
}
.edit-avatar-section .help-text {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 6px;
}
/* Мини-редактор аватара (сдвиг/масштаб/обрезка) */
.avatar-crop-panel {
max-width: 300px;
margin: 12px auto 8px;
padding: 12px;
background: var(--bg-elevated, #fff);
border: 1px solid var(--border);
border-radius: 10px;
text-align: center;
}
.avatar-crop-viewport {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
background: #111;
cursor: grab;
touch-action: none;
user-select: none;
}
.avatar-crop-viewport:active {
cursor: grabbing;
}
.avatar-crop-canvas {
display: block;
width: 100%;
height: 100%;
image-rendering: auto;
}
.avatar-crop-grid {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.5) calc(50% - 1px), rgba(255,255,255,.5) calc(50% + 1px), transparent calc(50% + 1px)),
linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255,255,255,.5) calc(50% - 1px), rgba(255,255,255,.5) calc(50% + 1px), transparent calc(50% + 1px));
}
.avatar-crop-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 10px 0 8px;
}
.avatar-crop-controls .btn-sm {
min-width: 34px;
font-size: 1rem;
line-height: 1;
}
.avatar-crop-hint {
font-size: 0.75rem;
color: var(--text-muted);
margin-left: 6px;
}
.avatar-crop-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.avatar-crop-actions .btn {
flex: 1;
}
.avatar-crop-msg {
margin-top: 8px;
font-weight: 600;
}
.avatar-crop-msg-warn {
color: var(--warning, #f0ad4e);
}
.avatar-crop-msg-err {
color: var(--danger, #e55);
}
/* Create post */
.create-post-page {
max-width: 640px;
margin: 0 auto;
padding: 16px;
}
/* Editor buttons row */
.editor-buttons {
display: flex;
gap: 8px;
padding: 8px;
}
.editor-buttons .btn {
font-size: 0.85rem;
cursor: pointer;
}
.gallery-editor-badge {
display: inline-block;
background: var(--primary-light);
color: var(--primary);
border: 1px solid var(--primary);
border-radius: var(--radius);
padding: 4px 10px;
font-size: 0.85rem;
cursor: default;
user-select: none;
font-weight: 500;
}
.gallery-bar {
padding: 6px 8px;
background: var(--bg);
border: 1px solid var(--border);
border-top: none;
border-bottom: none;
}
/* Rich text editor */
.rich-editor {
min-height: 200px;
padding: 12px;
border: none;
border-radius: var(--radius) var(--radius) 0 0;
font-size: 0.95rem;
font-family: inherit;
line-height: 1.6;
color: var(--text);
background: var(--bg-card);
outline: none;
word-wrap: break-word;
overflow-y: auto;
}
.rich-editor:empty::before {
content: attr(placeholder);
color: #999;
pointer-events: none;
}
.drop-zone {
padding: 16px;
border-top: 1px dashed var(--border);
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
transition: background 0.15s;
}
.drop-zone.dragover {
background: var(--primary-light);
border-color: var(--primary);
}
.drop-zone .btn-link {
cursor: pointer;
}
/* Comments */
.comments-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 0;
margin-top: 20px;
overflow-x: hidden;
}
/* Страница поста: блок ВЫВОДА комментариев — во всю ширину сайта (контент+сайдбар+gap). Форма ввода — суженная. */
body.post-page .comments-section,
body.post-page .comments-tree {
width: 100%;
max-width: 100%;
}
/* Форма комментария на странице поста — шириной = левой колонке (как линия-разделитель под постом) */
body.post-page .comment-form-wrap {
width: calc(100% - (22% - 12px + 100px) - 126px); /* = ширине .content-main / линии-разделителю под постом */
max-width: calc(100% - (22% - 12px + 100px) - 126px);
}
body.post-page .comment-form {
width: 100%;
max-width: 100%;
}
@media (max-width: 768px) {
body.post-page .comments-section { width: 100%; }
body.post-page .comment-form-wrap,
body.post-page .comment-form { width: 100%; max-width: 100%; }
}
.comments-section h2 {
margin-bottom: 16px;
font-size: 1.1rem;
}
.comment-form {
margin-bottom: 100px;
}
.comment-form textarea {
margin-bottom: 8px;
min-height: 60px;
}
.comment-form-upload {
display: flex;
align-items: center;
gap: 8px;
/* margin-bottom убран: единый отступ до кнопки задаёт .comment-form .btn-primary,
чтобы зазор был одинаковым для юзера и гостя */
}
/* Кнопка «Отправить»: единый отступ от поля(загрузки) для юзера и гостя */
.comment-form .btn-primary {
margin-top: 10px;
}
.comment-form-img-preview {
display: inline-block;
vertical-align: middle;
}
.upload-dots span {
animation: dotBounce 1.2s infinite;
font-size: 1.2rem;
font-weight: 700;
color: #999;
display: inline-block;
}
.upload-dots span:nth-child(2) { animation-delay: 0.2s; }
.upload-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
30% { transform: translateY(-4px); opacity: 1; }
}
.comment {
margin-bottom: 20px;
}
/* Ответы на комментарии (вложенные любой глубины) — тот же вертикальный пробел, что и у корневых */
.comment-replies .comment {
margin-bottom: 20px;
}
.comment .comment-header {
display: flex;
align-items: center;
margin-bottom: 6px;
}
.comment-author {
display: flex;
align-items: center;
gap: 8px;
}
/* Никнейм + дата/время — в столбик (дата под никнеймом) */
.comment-author-name-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
}
.comment-author-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--text);
}
.comment-guest-name {
color: var(--text-muted);
font-style: italic;
}
.comment-time {
font-size: 0.7rem;
color: var(--text-muted);
line-height: 1.2;
}
/* Ник + шильдик «автор» в одну строку (шильдик справа от никнейма, на одной оси по базовой линии) */
.comment-author-row {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.comment-author-badge {
display: inline-block;
padding: 0 4px; /* в 3 раза меньше */
margin-left: 4px;
background: var(--primary, #2563eb);
color: #fff;
font-size: 0.46rem; /* 0.23rem × 2 — шильдик «автор» */
font-weight: 700;
line-height: 1.35;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.2px;
vertical-align: middle;
cursor: default;
white-space: nowrap;
}
/* Шильдик «бот» — видимый только админу (гостебот-1 #124 комментит под гостевым псевдонимом).
Серая плашка — не путать с синей «автор» (выше). */
.comment-author-badge.bot-badge {
background: #6b7280;
}
/* Шильдик «бот» у АВТОРА поста в шапке (лента/страница поста/модалка) — видно только админу.
Серая плашка, чуть крупнее комментарийной (рядом с крупным ником). */
.post-author-badge.bot-badge {
display: inline-block;
padding: 0 6px;
margin-left: 6px;
background: #6b7280;
color: #fff;
font-size: 0.55rem;
font-weight: 700;
line-height: 1.5;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.2px;
vertical-align: middle;
cursor: default;
white-space: nowrap;
}
/* Шильдик «Битва ботов» на странице конкурса-ББ: тот же каркас, что у «автор»,
но выделенный цветом (фиолетовый акцент), чтобы не путать с синей «автор». */
.comment-author-badge.battle-badge-bb {
background: #7c3aed;
}
.comment-modal .modal-footer .btn-primary {
width: 100%;
}
.comment-rating {
font-size: 0.75rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 5px;
margin-left: 6px;
color: #fff;
line-height: 1.4;
}
.comment-rating.positive { background: #16a34a; }
.comment-rating.negative { background: #dc2626; }
/* Toast notification */
.toast {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
background: #16a34a;
color: #fff;
padding: 10px 20px;
border-radius: var(--radius);
font-size: 0.9rem;
font-weight: 600;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast-error {
background: #dc2626;
}
/* Exclusions page */
.exclusions-page {
max-width: 600px;
margin: 0 auto;
padding: 16px;
}
.exclusions-section {
margin-bottom: 24px;
}
.exclusions-section h2 {
font-size: 1.1rem;
margin-bottom: 8px;
}
.exclusions-empty {
color: var(--text-muted);
font-size: 0.9rem;
}
.exclusions-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.exclusions-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.exclusions-user {
display: flex;
align-items: center;
gap: 8px;
}
.exclusions-name {
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
color: var(--text);
}
.exclusions-name:hover {
text-decoration: underline;
}
.exclusions-username {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Settings page */
.settings-page {
max-width: 600px;
margin: 0 auto;
padding: 16px;
}
.settings-form {
margin-top: 16px;
}
.settings-section {
margin-bottom: 20px;
}
.settings-section h2 {
font-size: 1.05rem;
margin-bottom: 10px;
}
/* Браузерные (Web Push) уведомления — кнопка статуса в настройках */
.settings-push-status {
padding: 9px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.9rem;
}
.settings-push-status + .btn {
margin-left: 10px;
}
/* Раскрывающаяся инструкция «Как включить на Mac/iPhone» под кнопкой пуша */
.push-help {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
padding: 2px 14px;
}
.push-help summary {
cursor: pointer;
font-weight: 600;
font-size: 0.92rem;
padding: 10px 0;
color: var(--text);
list-style-position: outside;
}
.push-help summary:hover {
color: var(--primary, #3498db);
}
.push-help-body {
border-top: 1px solid var(--border);
padding: 12px 0 14px;
font-size: 0.9rem;
line-height: 1.5;
}
.push-help-body h3 {
font-size: 0.98rem;
margin: 12px 0 6px;
}
.push-help-body ol {
margin: 0 0 6px;
padding-left: 20px;
}
.push-help-body li {
margin-bottom: 6px;
}
.push-help-body .settings-hint {
margin-top: 0;
}
.settings-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
font-size: 0.9rem;
}
.settings-toggle .toggle-switch {
flex-shrink: 0;
}
.settings-field {
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.settings-label {
display: block;
font-size: 0.9rem;
margin-bottom: 10px;
color: var(--text);
}
.settings-hint {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 10px;
}
/* Строка события: основной тумблер + чекбокс «на почту» справа в один ряд */
.settings-toggle-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.settings-toggle-row .settings-toggle-main {
flex: 1;
}
.settings-email-check {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
font-size: 0.82rem;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.settings-email-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent, #9BCE00);
cursor: pointer;
margin: 0;
}
#notif-email {
width: 100%;
max-width: 320px;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
color: var(--text);
font-size: 0.9rem;
}
.settings-email-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#notif-email-save {
margin-left: 8px;
font-size: 0.85rem;
}
.privacy-slider {
display: flex;
align-items: center;
gap: 4px;
padding: 3px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
}
.privacy-opt {
flex: 1;
padding: 7px 10px;
border: none;
border-radius: 999px;
background: transparent;
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.privacy-opt:hover {
color: var(--text);
}
.privacy-opt.active {
background: var(--primary, #2563eb);
color: #fff;
}
/* Настройки анкеты: подпись-пояснение под тумблером (второй строкой, мельче)
и визуальное выделение опасного действия «Временно отключить анкету». */
/* Баннер «анкета временно отключена» — виден только владельцу отключённой анкеты. */
.account-disabled-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
max-width: 720px;
margin: 0 auto 12px;
padding: 10px 14px;
border: 1px solid #e57373;
border-radius: var(--radius, 8px);
background: rgba(229, 115, 115, 0.08);
color: var(--text, #e0e0e0);
font-size: 0.9rem;
}
.account-disabled-link {
color: #e57373;
font-weight: 600;
white-space: nowrap;
}
.settings-toggle-note {
display: block;
margin-top: 3px;
font-size: 0.8rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.4;
}
.settings-toggle--danger > span:first-child {
color: #e57373;
}
.settings-toggle--danger .toggle-slider {
border-color: #e57373;
}
/* Слайдер видимости профиля: три подписи длиннее, чем в остальных слайдерах,
поэтому на узких экранах ужимаем кегль и паддинг вместо переноса строки. */
.privacy-slider--profile .privacy-opt {
padding: 7px 8px;
}
@media (max-width: 480px) {
.privacy-slider--profile .privacy-opt {
padding: 7px 6px;
font-size: 0.74rem;
}
}
.sections-manage {
display: flex;
flex-direction: column;
gap: 8px;
}
.section-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.section-row-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.section-row-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.btn-danger {
background: #dc2626 !important;
border-color: #dc2626 !important;
color: #fff !important;
}
.privacy-modal-wrap {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.privacy-modal {
background: var(--bg-card, #fff);
border: 1px solid var(--border);
border-radius: var(--radius, 14px);
width: 100%;
max-width: 360px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.privacy-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
font-weight: 700;
font-size: 0.95rem;
}
.privacy-modal-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.privacy-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.privacy-row-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.privacy-row-value {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
}
.privacy-modal-footer {
padding: 12px 16px;
border-top: 1px solid var(--border);
}
.btn-block {
width: 100%;
}
.alert-success {
background: #dcfce7;
color: #16a34a;
padding: 10px 14px;
border-radius: var(--radius);
margin-bottom: 12px;
font-size: 0.9rem;
}
.comment-likes-static {
font-size: 0.85rem;
color: var(--text-muted);
margin-right: 8px;
}
.c-like {
color: #16a34a;
font-weight: 700;
}
.c-dislike {
color: #dc2626;
font-weight: 700;
}
.comment-body {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 6px;
word-wrap: break-word;
}
.comment-hidden-note {
font-style: italic;
color: var(--text-muted);
display: block;
}
.comment-author-name {
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
color: var(--text);
}
.comment-body p { margin-bottom: 0.3em; }
.comment-body p:has(img) {
margin-top: 25px;
margin-bottom: 25px;
}
.comment-body blockquote {
border-left: 2px solid var(--primary);
padding-left: 8px;
color: var(--text-secondary);
margin: 4px 0;
}
.comment-body code {
background: #f0f0f0;
padding: 1px 4px;
border-radius: 3px;
font-size: 0.85em;
}
.comment-footer {
display: flex;
gap: 4px;
align-items: center;
}
/* Меню действий комментария («три точки») — прижато к правому краю */
.comment-menu {
position: relative;
}
/* Десктоп: меню («три точки») справа от ника с пробелом 100px */
@media (min-width: 769px) {
.comment-menu {
margin-left: 100px;
}
}
/* Мобильных — меню по правому краю, на уровне ника; крупнее на 25% и поднято на 2px */
@media (max-width: 768px) {
.comment-menu { margin-left: auto; }
.comment-menu .comment-menu-btn.btn-action-sm {
padding: 5px 7.5px; /* +25% от 4px/6px */
transform: translateY(-2px); /* поднять на 2px */
}
.comment-menu .comment-menu-btn svg {
width: 20px; height: 20px; /* +25% от 16px */
}
}
.comment-menu .comment-menu-btn {
padding: 4px 6px;
}
.comment-menu-dropdown {
display: none;
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 150px;
z-index: 500;
background: var(--bg-card, #fff);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.14);
padding: 4px;
flex-direction: column;
}
.comment-menu-dropdown.open {
display: flex;
}
.comment-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
background: none;
border: none;
border-radius: 7px;
font-size: 0.88rem;
color: var(--text);
cursor: pointer;
text-align: left;
}
.comment-menu-item:hover {
background: var(--bg-hover, rgba(0,0,0,0.05));
}
.comment-menu-item.is-danger {
color: var(--danger, #d33);
}
.comment-menu-item.is-danger:hover {
background: rgba(221,51,51,0.1);
}
.comment-replies {
margin-left: 20px;
margin-top: 20px;
padding-left: 8px;
}
/* Mobile — убираем линии ветвления */
@media (max-width: 480px) {
.comment-replies {
margin-left: 0;
padding-left: 0;
}
}
/* Кнопка перехода к родительскому комментарию — слева от ника, иконка 20×20 (share-forward), только на десктопах */
.comment-reply-to {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
cursor: pointer;
color: var(--text-muted);
flex-shrink: 0;
margin-right: 2px;
}
.comment-reply-to:hover {
color: var(--primary);
}
.comment-guest .comment-body {
color: var(--text-muted);
}
.comment-highlight {
animation: commentFade 3s ease-out;
}
@keyframes commentFade {
0% { background: #fef9c3; }
100% { background: transparent; }
}
.comment-content {
border-radius: var(--radius);
}
.comment-reply-form {
margin: 8px 0;
}
.comment-modal {
max-width: 630px;
}
/* Десктоп: редактор ответа выше на 50% (140 → 210px), модалка растёт за ним. */
@media (min-width: 768px) {
.comment-modal .editor-quill {
min-height: 210px;
}
}
.comment-modal-body {
padding: 12px 16px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.comment-modal-body textarea {
width: 100%;
min-height: 300px;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
font-size: 0.9rem;
font-family: inherit;
resize: vertical;
outline: none;
}
@media (max-width: 480px) {
.comment-modal {
max-width: 90vw !important;
width: 90vw;
}
}
.comment-modal-body textarea:focus {
border-color: var(--primary);
}
.comment-modal-upload {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.comment-reply-form textarea {
min-height: 40px;
font-size: 0.85rem;
}
.load-replies {
margin-top: 4px;
font-size: 0.8rem;
}
/* Закладки окна уведомлений: «Уведомления» | «Сообщения».
Живут В ШАПКЕ окна, слева, вместо статичного заголовка; справа от них —
шестерёнка переписки и «✕». Отступы кратны 8px, колонка аватарок 64px. */
.notif-header {
/* Шапка держит закладки слева, а шестерёнку+«✕» справа: space-between
развёл бы три группы, поэтому прижимаем правый край сам. */
justify-content: flex-start;
gap: 8px;
padding: 8px 12px;
}
.notif-header .modal-close {
margin-left: 4px;
}
.notif-tabs {
display: flex;
gap: 4px;
margin-right: auto; /* закладки влево, шестерёнка и «✕» — вправо */
}
.notif-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: 0;
border-radius: 16px;
background: transparent;
color: var(--text-muted, #888);
font-family: inherit;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.notif-tab:hover { background: rgba(0,0,0,0.05); color: var(--text, #222); }
.notif-tab.is-active {
background: var(--primary-light, #e8f0fe);
color: var(--primary, #2563eb);
}
/* Кружки на закладках: обычный — голубой, непрочитанные ЛС — салатовый (#7ed957),
в тон кружку колокольчика. */
.notif-tab-badge {
min-width: 18px;
padding: 1px 5px;
border-radius: 9px;
background: var(--primary, #2563eb);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
.notif-tab-badge--pm { background: #7ed957; color: #143d05; }
.notif-pane { display: flex; flex-direction: column; min-height: 0; }
/* Панель «Сообщения»: слева колонка аватарок, справа переписка. */
.notif-pane--msgs {
flex: 1 1 auto;
flex-direction: row;
min-height: 0;
}
.pm-convo-rail {
flex: 0 0 64px;
border-right: 1px solid var(--border);
background: var(--bg, #f7f7f8);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.pm-convo-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
}
.pm-convo-empty {
padding: 16px 4px;
color: var(--text-muted, #888);
font-size: 0.72rem;
text-align: center;
line-height: 1.4;
}
.pm-convo-item {
position: relative;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
flex: 0 0 auto;
}
.pm-convo-av {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: #666;
color: #fff;
font-size: 1rem;
font-weight: 600;
box-shadow: 0 0 0 2px transparent;
transition: box-shadow 0.15s;
}
.pm-convo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Активный собеседник — рамка вокруг аватарки */
.pm-convo-item.is-active .pm-convo-av { box-shadow: 0 0 0 2px var(--primary, #2563eb); }
.pm-convo-item:hover .pm-convo-av { box-shadow: 0 0 0 2px rgba(0,0,0,0.18); }
.pm-convo-item.is-active:hover .pm-convo-av { box-shadow: 0 0 0 2px var(--primary, #2563eb); }
/* Онлайн — точка в правом нижнем углу аватарки */
.pm-convo-av.is-online::after {
content: '';
position: absolute;
right: 2px;
bottom: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--online, #22c55e);
border: 2px solid var(--bg-card, #fff);
}
/* Непрочитанное: салатовая точка с числом, как кружок колокольчика */
.pm-convo-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: #7ed957;
color: #143d05;
font-size: 0.68rem;
font-weight: 700;
line-height: 18px;
text-align: center;
border: 2px solid var(--bg-card, #fff);
box-sizing: content-box;
}
/* Правая часть: шапка собеседника + тред + поле ввода */
.pm-convo-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
/* Полоса собеседника над перепиской УБРАНА (решение юзера 13.09.26):
дублировала аватарку и ник, которые и так есть в ленте сверху, и съедала
~44px высоты на телефоне. Активный собеседник подсвечивается в ленте
(.pm-convo-item.is-active). Элемент #pm-convo-head оставлен в разметке
пустым — на нём висит #pm-title с data-nick/data-username, откуда берётся
имя для подтверждения «Удалить переписку». */
.pm-convo-head {
display: none;
}
/* Шестерёнка в шапке окна: выпадающее меню позиционируется от неё. */
.notif-header .pm-menu-wrap {
margin-left: 0; /* в панели переписки был margin-left:auto — в шапке не нужен */
}
/* В окне-закладке тред занимает всё свободное место (в отдельной модалке
ограничивались 52vh — здесь окно и так ограничено max-height). */
.notif-modal .pm-body {
max-height: none;
min-height: 200px;
}
.notif-modal .pm-input-row { padding: 8px 12px; }
/* ===== Личные сообщения (ПМ) ===== */
.pm-modal {
max-width: 460px;
}
.pm-title-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
vertical-align: middle;
margin-right: 8px;
}
.pm-title-name {
color: var(--text, #222);
font-weight: 600;
}
.pm-title-online-dot {
position: static;
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
vertical-align: middle;
border-radius: 50%;
background: var(--online);
border: 2px solid var(--bg-card);
}
/* Выпадающее меню шестерёнки в окне переписки */
.pm-menu-wrap {
position: relative;
margin-left: auto;
}
.pm-menu {
/* position/top/left/max-height задаёт JS (pm.js: positionPmMenu):
меню живёт в и позиционируется fixed от кнопки-шестерёнки, иначе
окно уведомлений (fixed + overflow:hidden) обрезало его хвост. */
position: fixed;
max-height: 60vh;
overflow-y: auto;
overscroll-behavior: contain;
z-index: 1200; /* выше окна уведомлений (.modal-popup z-index 1000) */
min-width: 220px;
padding: 4px;
border: 1px solid var(--border, #e3e3e6);
border-radius: 10px;
background: var(--card, #fff);
box-shadow: 0 6px 20px rgba(0,0,0,0.14);
text-align: left;
}
.pm-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 7px 9px;
border: 0;
border-radius: 7px;
background: transparent;
/* Все пункты меню — ЧЁРНЫЕ (решение юзера 13.09.26): без красных/цветных
акцентов, единый вид списка. */
color: #000;
font-family: inherit;
font-size: 0.86rem;
text-align: left;
cursor: pointer;
}
.pm-menu-item:hover { background: rgba(0,0,0,0.05); }
/* .is-danger больше не красит текст — оставлен как маркер в разметке,
но визуально пункты одинаковые и чёрные. */
.pm-menu-item.is-danger { color: #000; }
.pm-menu-arrow { opacity: 0.6; font-size: 0.8rem; }
/* Подменю со звуками внутри меню */
/* Подменю со звуками: 9 пунктов в столбик давали ~302px и упирались в
окно переписки (у .pm-modal max-height ~512px и overflow:hidden) —
хвост списка срезался. Ограничиваем высоту и даём собственную прокрутку,
тогда меню целиком помещается в окно. */
.pm-submenu {
padding: 2px 0 4px 8px;
/* Прокрутку даём самому меню (.pm-menu), а не подменю: иначе получались две
вложенные прокрутки и «залипание» колеса на границе списка. Скроллить здесь
не нужно — высоту ограничивает .pm-menu по свободному месту экрана. */
overflow: visible;
overscroll-behavior: auto;
}
.pm-submenu .pm-sound-item {
padding: 4px 6px;
}
/* Иконка настроек уведомлений в шапке окна переписки (слева от «✕») */
.pm-gear-btn {
margin-right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-muted, #888);
font-size: 1rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: color .15s ease, background .15s ease, transform .3s ease;
}
.pm-gear-btn:hover {
color: var(--text, #222);
background: rgba(0,0,0,0.05);
transform: rotate(45deg);
}
/* Панель настроек звука */
.pm-settings {
padding: 10px 16px 12px;
border-bottom: 1px solid var(--border);
background: var(--bg, #f7f7f8);
}
.pm-settings-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--text, #222);
margin-bottom: 8px;
}
.pm-sound-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.pm-sound-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
border-radius: 8px;
cursor: pointer;
font-size: 0.86rem;
/* Чёрный — как и пункты меню (единый вид списка, решение 13.09.26). */
color: #000;
}
.pm-sound-item:hover { background: rgba(0,0,0,0.04); }
.pm-sound-item.is-active { background: rgba(0,0,0,0.06); font-weight: 600; }
.pm-sound-item input[type="radio"] { margin: 0; flex-shrink: 0; }
.pm-sound-name { flex: 1 1 auto; }
.pm-sound-off-mark {
font-size: 0.72rem;
color: var(--text-muted, #888);
padding: 0 4px;
}
.pm-sound-listen {
flex-shrink: 0;
width: 20px;
height: 20px;
padding: 0;
border: 1px solid var(--border, #e3e3e6);
border-radius: 50%;
background: transparent;
color: var(--text-muted, #888);
font-size: 0.6rem;
line-height: 1;
cursor: pointer;
}
.pm-sound-listen:hover { color: var(--text, #222); border-color: var(--text-muted, #888); }
.pm-settings-hint {
margin-top: 8px;
font-size: 0.72rem;
color: var(--text-muted, #888);
}
.pm-body {
flex: 1 1 auto;
min-height: 260px;
max-height: 52vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg, #f7f7f8);
}
.pm-empty {
color: var(--text-muted, #888);
text-align: center;
margin: auto;
font-size: 0.9rem;
}
/* Кнопка подгрузки более ранних сообщений (вверх по истории) */
.pm-load-older {
display: block;
margin: 0 auto 10px;
padding: 6px 14px;
background: transparent;
color: var(--text-muted, #888);
border: 1px solid var(--border, #e3e3e6);
border-radius: 14px;
font-size: 0.82rem;
font-family: inherit;
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.pm-load-older:hover {
color: var(--text, #222);
border-color: var(--text-muted, #888);
}
.pm-row {
display: flex;
max-width: 85%;
}
.pm-mine {
align-self: flex-end;
}
.pm-theirs {
align-self: flex-start;
}
.pm-bubble {
padding: 8px 12px;
border-radius: 14px;
font-size: 0.9rem;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.pm-mine .pm-bubble {
background: var(--primary, #2563eb);
color: #fff;
border-bottom-right-radius: 4px;
}
.pm-theirs .pm-bubble {
background: var(--bg-card, #fff);
color: var(--text, #222);
border-bottom-left-radius: 4px;
border: 1px solid var(--border, #e5e5e5);
}
.pm-bubble-head {
font-size: 0.72rem;
font-weight: 600;
opacity: 0.75;
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 6px;
}
.pm-mine .pm-bubble-head { color: rgba(255,255,255,0.85); }
.pm-theirs .pm-bubble-head { color: var(--text-muted, #888); }
.pm-time {
font-weight: 400;
opacity: 0.7;
}
/* ===== Реакции-смайлики в ЛС =====
Раскладка выведена из правила равных/кратных отступов проекта:
круг кнопки 22px (как .pm-act), иконка 12px, поля по 5px = (22-12)/2.
Отступ кнопки от края пузыря — 10px (margin-left у .pm-acts-reaction). */
/* Кнопка-смайлик реакции: ЖИВЁТ РЯДОМ С ПУЗЫРЁМ, в блоке .pm-acts (просьба 18.09.26),
тем же кругом 22px, что «изменить/удалить» (.pm-act).
Было: absolute в правом верхнем углу чужого пузыря — смайлик висел на тексте
сообщения, и голове пузыря приходилось держать запас padding-right: 26px. */
/* ⚠ Специфичность. .pm-acts/.pm-act объявлены НИЖЕ по файлу (стр. ~4035), а это
правило — выше, поэтому «голый» класс .pm-acts-reaction проигрывал бы их
margin-left:auto (проверено на проде: computed margin-left был 0px, хотя в файле
стоит 10px). Прижимаем через более специфичный селектор с родителем .pm-row. */
.pm-row .pm-acts-reaction {
/* Чужой пузырь идёт в строке ПЕРВЫМ, а смайлик должен оказаться СПРАВА от него:
order переставляет элементы визуально, не меняя порядок в HTML. */
order: 2;
margin-left: 10px;
margin-right: 0;
}
/* Кнопка реакции — это ЭЛЕМЕНТ .pm-act (разметку рисует pm.js):
форма/фон/цвет/показ при наведении наследуются от него, здесь только иконка.
⚠ Не описываем геометрию через .pm-react-open: у этого класса специфичность
та же, что у .pm-act, а .pm-act объявлен НИЖЕ по файлу — он бы перебил правило
(проверено на стенде: кнопка получалась 16×21 вместо круга 22×22). */
/* Иконка смайлика КРУПНЕЕ, чем у edit/del (10px): просьба 18.09.26 — увеличить именно
иконку, а не круг. Круг остаётся 22px (.pm-act), поля по краям = (22-16)/2 = 3px —
смайлик крупный, но не липнет к краю кнопки.
⚠ Селектор с родителем .pm-row обязателен: `.pm-act svg { width:10px }` объявлен
НИЖЕ по файлу и при равной специфичности перебивает (замер на стенде дал 10px,
хотя в файле стояло 16px). */
.pm-row .pm-react-open svg {
width: 16px;
height: 16px;
display: block;
}
/* Открытая панель: кнопка остаётся подсвеченной. Специфичность 0-2-0 —
гарантированно перебивает .pm-act (0-1-0), поэтому здесь .pm-react-open уместен. */
.pm-row .pm-react-open.is-active {
opacity: 1;
background: var(--pm-act-bg-hover, #eeeeee);
}
/* Убираем рамку фокуса после КЛИКА (у кнопок реакций и в списке, и в панели).
Браузер по умолчанию рисует синюю обводку вокруг нажатой кнопки — она
остаётся висеть и выглядит как «выделенный смайлик».
Клавиатурный фокус при этом СОХРАНЯЕМ (правило ниже, :focus-visible) —
иначе при навигации табом не видно, где находишься. Тот же приём, что у
.notif-bell в этом файле. */
.pm-react-open:focus,
.pm-react-open:active,
.pm-react-pick:focus,
.pm-react-pick:active,
.pm-react-badge:focus,
.pm-react-badge:active {
outline: none;
}
.pm-react-open:focus-visible,
.pm-react-pick:focus-visible,
.pm-react-badge:focus-visible {
outline: 2px solid var(--primary, #2563eb);
outline-offset: 2px;
}
/* Смайлик внутри выбранной кнопки: убираем и подчёркивание/рамку от :active. */
.pm-react-pick:active {
transform: scale(0.95);
}
/* На узком экране вертикаль панели тоже считает JS (positionReactPanel): он решает,
вниз или вверх раскрывать, и ставит top/bottom инлайном. В CSS оставляем только
горизонтальный анкер и точку трансформации — иначе медиазапрос и JS-инлайн спорили бы
за одно свойство, и панель прыгала при открытии (жалоба 18.09.26: «выезжает рывками»).
Right-анкер уже задан базовым правилом ниже (right:100%), он одинаков для всех ширин. */
@media (max-width: 600px) {
.pm-react-panel {
transform-origin: right top;
}
}
/* Панель со смайликами: ВЫЕЗЖАЕТ ВНИЗ из-под кнопки-смайлика (просьба 18.09.26).
Позиционируется от обёртки .pm-react-panel-bd внутри блока иконок .pm-acts
(обёртка = position: relative), а сама панель прижата к правому краю кнопки —
выравнивание по одной оси с кружком смайлика.
⚠ ГРАБЛИ (17.09.26): НЕ ставить opacity:0 в базовое правило. Панель создаётся
уже видимой и анимируется только «выездом»; если базовый opacity:0 держать,
то после завершения animation (fill-mode forwards не удерживает состояние
при перерисовке) панель остаётся прозрачной — в DOM 6 смайликов, а глазами
пусто. Поэтому видимость задаётся только кейфреймом. */
.pm-react-panel-bd {
position: relative;
/* inline-block + нулевые размеры: обёртка существует только как точка отсчёта
для абсолютной панели и не должна участвовать в раскладке .pm-acts
(иначе в колоночном .pm-acts появлялась бы вторая строка и пузырь съезжал). */
display: inline-block;
width: 0;
height: 0;
}
.pm-react-panel {
position: absolute;
/* Вертикаль по умолчанию — ПОД кнопкой. Направление (вниз/вверх) уточняет JS
через positionReactPanel(), выставляя top/bottom инлайном; margin-зазор при
перевороте тоже переключается там. */
/* Позицию (left/top либo left/bottom) выставляет JS — positionReactPanel() в pm.js:
он считает её В ПИКСЕЛЯХ от фактического прямоугольника кнопки, потому что обёртка
нулевая (0×0) и права/низ от неё не совпадают с краями кнопки. Значения ниже —
только fallback на случай, если JS не успел/не смог (панель всё равно появится
под кнопкой, а не в углу экрана). */
top: 100%;
bottom: auto;
right: 100%;
left: auto;
margin-top: 6px;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 2px;
padding: 3px 4px;
background: var(--bg-card, #fff);
border: 1px solid var(--border, #e5e5e5);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
white-space: nowrap;
z-index: 3;
transform-origin: right top;
/* ==== Плавный выезд вниз (просьба 18.09.26: «выезжает рывками — надо плавно») ====
Почему дёргалось (разбор прежнего варианта .16s translateY(-8px) scaleY(.9)):
1. Слой не был подготовлен: без will-change браузер создаёт композитный слой
В ПЕРВОМ кадре анимации, поэтому первый-второй кадр проваливаются — это и
читается как рывок в начале.
2. scaleY сжимал САМУ панель вместе со смайликами: содержимое сплющивалось и
«щёлкало» на последнем кадре, а не выезжало.
3. .16s на 8px = ~3 кадра — движение успевало начаться и сразу кончиться,
линейный «толчок» вместо выезда.
Как сделано теперь:
- анимируем ТОЛЬКО transform (сдвиг по Y) и opacity — обе операции композитные,
не вызывают перерисовку рамки/тени;
- will-change: transform|opacity поднимает элемент на свой слой ЗАРАНЕЕ;
- без scale: смайлики не деформируются;
- .24s + cubic-bezier(.22,.61,.36,1) — быстрый старт, мягкое торможение
(движение «выезжает и оседает», а не обрывается).
⚠ ГРАБЛИ (17.09.26, сохраняем): НЕ ставить opacity:0 в базовое правило. Панель
создаётся уже видимой и анимируется только «выездом»; если базовый opacity:0
держать, то после завершения animation панель остаётся прозрачной — в DOM
6 смайликов, а глазами пусто. Поэтому стартовая прозрачность задаётся ТОЛЬКО
кейфреймом, а конечная (opacity:1) — самим базовым правилом. */
opacity: 1;
will-change: transform, opacity;
backface-visibility: hidden;
animation: pmReactSlide .24s cubic-bezier(.22, .61, .36, 1);
}
@keyframes pmReactSlide {
from {
transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Появление СНИЗУ ВВЕРХ, когда панель раскрывается над кнопкой (мало места снизу):
класс навешивает JS, кейфрейм зеркальный — движение всегда «из кнопки наружу»,
иначе выезд шёл бы против направления раскрытия. */
.pm-react-panel--up {
animation-name: pmReactSlideUp;
}
@keyframes pmReactSlideUp {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Плавное ЗАКРЫТИЕ: панель уезжает обратно тем же движением. Класс навешивает JS
(closeReactPanel), и узлы удаляются по animationend — иначе панель исчезала
«щелчком» (жалоба 18.09.26). Длительность чуть короче открытия: закрытие должно
ощущаться отзывчивее, чем появление. */
.pm-react-panel.is-closing {
animation: pmReactSlideOut .16s cubic-bezier(.4, 0, 1, 1) forwards;
pointer-events: none; /* по уезжающей панели уже нельзя кликнуть */
}
@keyframes pmReactSlideOut {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-8px); opacity: 0; }
}
/* Закрытие панели, раскрытой ВВЕРХ — уезжает вниз. */
.pm-react-panel--up.is-closing {
animation-name: pmReactSlideOutUp;
}
@keyframes pmReactSlideOutUp {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(8px); opacity: 0; }
}
/* Уважаем системную настройку «уменьшить движение»: панель просто появляется. */
@media (prefers-reduced-motion: reduce) {
.pm-react-panel,
.pm-react-panel.is-closing { animation: none; will-change: auto; }
}
.pm-react-pick {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background .12s ease, transform .12s ease;
}
.pm-react-pick:hover {
background: rgba(0,0,0,0.06);
transform: scale(1.15); /* смайлик «отзывается» на курсор */
}
/* Плашка уже поставленной реакции: ВНУТРИ пузыря, под текстом.
Обводки нет (просьба 18.09.26) — только фон и смайлик.
Отступ сверху 4px = отступу кнопки реакции от края пузыря. */
.pm-react-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 4px;
padding: 1px 6px;
border: 0; /* обводка убрана: плашка — просто смайлик на фоне */
border-radius: 10px;
background: var(--bg-card, #fff);
color: var(--text, #222);
font-size: 12px;
line-height: 1.5;
cursor: pointer;
flex-shrink: 0;
transition: background .12s ease;
}
/* У своих сообщений пузырь синий — белая плашка на нём читается лучше. */
.pm-mine .pm-react-badge {
background: #fff;
}
.pm-react-badge:hover {
background: rgba(0,0,0,0.04);
}
.pm-mine .pm-react-badge:hover {
background: #f2f2f2;
}
.pm-react-emoji {
font-size: 13px;
line-height: 1;
}
.pm-react-count {
font-size: 11px;
opacity: 0.7;
}
.pm-read-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
margin-left: 2px;
vertical-align: middle;
}
/* Значок «изменено» — в той же строке, что и иконка прочитанности, тем же размером */
.pm-edited-icon {
display: inline-flex;
width: 12px;
height: 12px;
flex-shrink: 0;
margin-left: 2px;
opacity: 0.8;
/* та же ось, что у иконки прочитанности */
transform: translateY(-2px);
}
.pm-edited-icon svg {
width: 100%;
height: 100%;
}
/* Иконки действий (изменить/удалить) — СЛЕВА от пузыря, на белом поле.
Раньше жили внутри пузыря и были белыми (color: inherit); теперь это отдельный
элемент строки: серый цвет, видны при наведении.
margin-left: auto прижимает всю группу вправо вместе с пузырём (у .pm-mine
выравнивание по правому краю задаётся именно этим, а не align-self пузыря).
Иконки стоят КОЛОНКОЙ и ЦЕНТРИРУЮТСЯ ПО ВЫСОТЕ пузыря (просьба 14.09.26):
было align-self: flex-end + padding-bottom: 6px — группа липла к низу. */
.pm-acts {
display: flex;
flex-direction: column; /* вертикально: редактировать над удалить */
align-items: center;
/* Зазор между кругами = gap + margin-bottom у .pm-act-edit.
Отступ edit минимальный (1px), чтобы он не слился с del. */
gap: 2px;
flex-shrink: 0;
margin-left: auto;
margin-right: 10px; /* отступ от синего пузыря (было 8px, потом 5px, теперь +5px) */
/* Центр по высоте пузыря: группа иконок встаёт на одну ось с сообщением,
а не у нижнего края. padding-bottom убран — он сдвигал группу вверх против центра. */
align-self: center;
}
/* Кнопка действия: круглая подложка с иконкой внутри.
Размеры выведены из правила равных отступов: круг 22px, иконка 10px,
поля по 6px с каждой стороны ((22-10)/2) — иконка не липнет к краю круга.
Фон и иконка осветлены ЕЩЁ на 30% (просьба 14.09.26, вторая итерация):
фон #ececec -> #f2f2f2 -> #f6f6f6, иконка #333333 -> #707070 -> #9b9b9b.
Осветление считается от белого базы: c + (255-c)*0.3, так сохранён
тот же контраст пары фон/иконка. Кнопки не «давят» на белом поле. */
.pm-act {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%; /* круг */
background: var(--pm-act-bg, #f6f6f6);
color: var(--pm-act-color, #9b9b9b);
opacity: 0;
cursor: pointer;
flex-shrink: 0;
transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.pm-act svg {
width: 10px;
height: 10px;
display: block;
}
/* «Изменить» стоит прямо над «Удалить». Зазор между кругами складывается из
этого отступа и gap: 1px + 2px = 3px (путь: 11px -> 6px -> 3px).
Отступ СНИЗУ у кнопки редактирования, чтобы «удалить» осталась на своей оси
у нижнего края пузыря — якорем группы служит именно она. */
.pm-act-edit {
margin-bottom: 1px;
}
/* Показываем действия при наведении на строку сообщения (на мобиле — всегда) */
.pm-row:hover .pm-act,
.pm-acts:hover .pm-act {
opacity: 1;
}
/* Наведение: круг темнеет (относительно нового светлого фона), иконка остаётся серой —
так кнопка «отзывается» на курсор. #dcdcdc -> #e7e7e7 -> #eeeeee (те же +30%),
разница с базовым #f6f6f6 осталась той же по контрасту. */
.pm-act:hover {
opacity: 1 !important;
background: var(--pm-act-bg-hover, #eeeeee);
}
/* Удаление при наведении — красный круг, чтобы действие читалось как опасное.
Пара тоже осветлена на 30% (просьба 14.09.26): #f7dcdc -> #f9e6e6,
#c62828 -> #d76868 — на новом светлом фоне красный не «выжигает» глаз,
но остаётся читаемым. */
.pm-act-del:hover {
background: #f9e6e6;
color: #d76868;
}
@media (hover: none) {
.pm-act { opacity: 0.9; }
}
/* ==== Мобильные крестики «✕» — крупнее (просьба 14.09.26) ====
Задевает два окна: «Уведомления» и вкладку «Сообщения» (крестик у них ОДИН —
#notif-close с классом .modal-close в общей модалке .notif-modal), а также
модалку изображения из ЛС (.pm-img-modal-close).
Размеры: 1.1rem -> 1.5rem (17.6px -> 24px) и 30px -> 40px у области нажатия
(40px — минимальный комфортный размер для пальца). */
@media (max-width: 600px) {
.notif-header .modal-close {
font-size: 1.5rem;
/* Крестик — цель для пальца, а не для курсора: увеличиваем и область нажатия. */
min-width: 40px;
min-height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
/* Прижимаем к правому краю шапки: с ростом ширины flex-элемент иначе
«съезжает» влево от края. */
margin-left: auto;
}
.pm-img-modal-close {
width: 40px;
height: 40px;
font-size: 1.3rem;
}
}
/* ==== Мобильная раскладка иконок действий (просьба 14.09.26) ====
Круги стоят ГОРИЗОНТАЛЬНО с отступом 10px и ЦЕНТРИРУЮТСЯ ПО ВЫСОТЕ пузыря.
Размеры меньше на 10% от прежних мобильных (28px -> 25px, иконка 12px -> 11px).
Иконки ТЁМНО-СЕРАЯ (#333), а не чёрная. На десктопе всё это не применяется:
там колонка, 22px, чёрные иконки, прижатие к низу пузыря. */
@media (max-width: 600px) {
.pm-acts {
flex-direction: row; /* горизонтально вместо колонки */
gap: 10px; /* отступ между кругами */
align-items: center;
margin-right: 10px; /* отступ от синего пузыря */
/* Центр по высоте пузыря: было flex-end + padding-bottom: 6px (прижатие к низу). */
align-self: center;
padding-bottom: 0;
}
/* Блок со смайликом реакции стоит СПРАВА от чужого пузыря — здесь margin-right
лишний, а зазор с пузырём даёт margin-left (10px, как у своих действий).
Родитель .pm-row — чтобы перебить .pm-acts ниже по файлу (та же причина,
что и у десктопного правила). */
.pm-row .pm-acts-reaction {
margin-right: 0;
}
/* Подъём «редактировать» — только для вертикальной раскладки: в ряду он сдвинул бы
кнопку вверх и сломал ось. */
.pm-act-edit {
margin-bottom: 0;
}
.pm-act {
width: 25px; /* было 28px, теперь -10% */
height: 25px;
/* Цвет НЕ задаём: наследуем базовый .pm-act (#9b9b9b — осветлённый серый).
Раньше здесь стоял жёсткий #333, который перебивал базовый цвет и делал
мобильные иконки заметно темнее десктопных. */
}
.pm-act svg {
width: 11px; /* было 12px, теперь -10% */
height: 11px;
}
}
/* Инлайн-редактирование сообщения.
Textarea вставлена ВНУТРЬ .pm-bubble-text (внутри пузыря): текст должен выглядеть
РОВНО как обычный текст сообщения — та же гарнитура/размер/межстрочный, без своих
полей и рамки, которые «сдвигают» текст (правка 14.09.26).
Кнопки «Сохранить/Отмена» лежат ЗА пузырём — см. .pm-edit-actions ниже. */
.pm-edit-input {
display: block;
width: 100%;
min-width: 0; /* НЕ 180px: в режиме правки ширина задаётся из JS,
а собственный минимум textarea мешал пузырю
сохранять исходную ширину (баг 14.09.26) */
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent; /* фон пузыря просвечивает — как у текста */
color: inherit; /* цвет текста пузыря (белый на синем) */
font-family: inherit;
font-size: inherit; /* от .pm-bubble (0.9rem) */
line-height: inherit; /* от .pm-bubble (1.4) */
font-weight: inherit;
letter-spacing: inherit;
/* resize отключён: высота управляется из JS (autoGrowPmTextarea по содержимому),
рукоятка ресайза тянула бы поле за пределы пузыря. */
resize: none;
outline: none;
box-shadow: none;
/* Обычно прокрутки нет — поле растёт само. JS включает overflow-y: auto,
если текст длиннее max-height (очень длинные сообщения). */
overflow-y: hidden;
/* Потолок высоты: выше него поле скроллится, а не растягивает пузырь на весь экран.
40vh согласован с .pm-body (max-height: 52vh) — поле правки заведомо ниже окна. */
max-height: 40vh;
}
/* Пузырь в режиме правки: ширина фиксируется из JS (по замеру ДО правки), поэтому
box-sizing обязателен — иначе padding добавлялся бы сверх зафиксированной ширины. */
.pm-row-editing .pm-bubble {
box-sizing: border-box;
}
/* Обводки в фокусе НЕТ (просьба 14.09.26): поле правки не должно получать никакой
рамки/свечения — текст выглядит как обычное сообщение, и ничего не «прыгает».
Раньше здесь был box-shadow (белый 2px, затем тёмно-синий 1px) — убрано совсем.
⚠ :focus прописан ЯВНО, потому что глобальное правило
`input:focus, textarea:focus` (см. выше) рисует синее свечение 2px всем полям.
Полагаться на одну специфичность класса нельзя: при смене порядка правил
обводка вернулась бы незаметно. */
.pm-edit-input:focus,
.pm-theirs .pm-edit-input:focus {
box-shadow: none;
outline: none;
border-color: transparent;
}
/* ==== Режим правки сообщения ====
Строка раскладывается СТОЛБИКОМ: пузырь сверху, кнопки «Сохранить/Отмена»
под ним — на белом поле, ЗА пузырём (просьба 14.09.26).
.pm-row по умолчанию flex-строка (иконки действий + пузырь), поэтому здесь
переключаем направление и выравнивание по правому краю (для своих сообщений). */
.pm-row-editing {
flex-direction: column;
align-items: flex-end; /* свои сообщения прижаты вправо */
}
.pm-theirs.pm-row-editing {
align-items: flex-start; /* чужие — влево */
}
/* В режиме правки иконки действий (edit/del) не нужны — идёт правка, действия сбивали бы. */
.pm-row-editing .pm-acts {
display: none;
}
.pm-edit-actions {
display: flex;
gap: 6px;
margin-top: 6px; /* отступ от пузыря — кнопки стоят ЗА ним */
flex-shrink: 0;
}
/* Кнопки лежат на БЕЛОМ поле (вне пузыря), поэтому тёмный текст на светлом фоне.
Раньше были внутри синего пузыря и требовали белых цветов — см. историю ниже. */
.pm-edit-save,
.pm-edit-cancel {
padding: 3px 10px;
border-radius: 10px;
border: 1px solid var(--border, #e3e3e6);
background: transparent;
color: var(--text, #222);
font-family: inherit;
font-size: 0.78rem;
line-height: 1.3;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pm-edit-cancel:hover {
background: var(--bg, #f2f2f3);
}
.pm-edit-save {
border-color: transparent;
background: var(--accent, #2f3033);
color: #fff;
}
.pm-edit-save:hover {
opacity: 0.88;
}
/* read — поднята на 3px вверх относительно unread (-2px) */
.pm-read-icon--read {
transform: translateY(-2px);
}
.pm-read-icon--unread {
opacity: 0.45;
transform: translateY(1px); /* опущена на 1px для оптического выравнивания со временем */
}
.pm-bubble-text {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}
.pm-input-row {
display: flex;
/* Центрируем скрепку, поле ввода и «Отправить» по ОДНОЙ горизонтальной оси.
Было align-items: flex-end (выравнивание по низу): центр кнопок оказывался
на 6px ниже центра поля, потому что .pm-input-wrap выше textarea (подсказка
.pm-input-hint) и низ кнопок совпадал с низом wrap, а не с полем (жалоба 14.09.26). */
align-items: center;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid var(--border);
}
.pm-input-wrap {
flex: 1 1 auto;
}
.pm-input-wrap textarea {
display: block; /* убирает зазор под inline-элементом (baseline),
из-за которого .pm-input-wrap был выше поля на ~6px
и кнопки не вставали с ним на одну ось */
width: 100%;
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 10px;
font-size: 0.9rem;
font-family: inherit;
resize: none;
outline: none;
min-height: 40px;
box-sizing: border-box;
}
.pm-input-wrap textarea:focus {
border-color: var(--primary);
}
.pm-input-wrap textarea:disabled {
background: var(--bg, #f2f2f3);
color: var(--text-muted);
}
.pm-input-hint {
font-size: 0.78rem;
color: var(--danger, #d63638);
margin-top: 5px;
}
.pm-send-btn {
flex-shrink: 0;
/* Круглая кнопка 40×40 с синим фоном (фон даёт .btn-primary = var(--primary)).
padding и border-radius переопределяем: базовый .btn идёт с padding 8px 16px
и radius var(--radius)=8px, из-за чего кнопка была «таблеткой». */
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
/* Меньше базового .btn (0.95rem) — стрелка заметно вылезала за круг. */
font-size: 0.9rem;
line-height: 1;
}
.pm-send-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Кнопка «вставить изображение» — слева от поля ввода, по высоте кнопки отправки.
Прозрачная, иконка скрепки в currentColor: не спорит с кнопкой «➤».
Элемент —